<template>
  <div>
    <div>
      <!-- (重要)遇到复选框, v-model的变量值
              非数组 - 关联的是复选框的checked属性
              数组   - 关联的是复选框的value属性
            -->
      <span>爱好:</span>
      <input type="checkbox" value="科幻" v-model="hobby" />
      科幻
      <input type="checkbox" value="喜剧" v-model="hobby" />
      喜剧
      <input type="checkbox" value="动漫" v-model="hobby" />
      动漫
      <input type="checkbox" value="冒险" v-model="hobby" />
      冒险
      <input type="checkbox" value="科技" v-model="hobby" />
      科技
      <input type="checkbox" value="军事" v-model="hobby" />
      军事
      <input type="checkbox" value="娱乐" v-model="hobby" />
      娱乐
      <input type="checkbox" value="奇闻" v-model="hobby" />
      奇闻
    </div>
    <ul >
      <li v-for="item in hobby" :key="item">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 爱好数据
      hobby: [],
    };
  },
};
</script>

<style></style>
